<!DOCTYPE html>
<html lang="en">

<%- include('partials/head.ejs',
		{
			page:'fontlist',
			title:'Fontlist - Toolz',
			description:'Discover the full list of fonts available on your browser with this comprehensive font testing page.',
			url: 'd3ward.github.io/toolz/fontlist',
			preview_thumbnail:'https://d3ward.github.io/toolz/src/preview_toolz.png',
			keywords:'fonts, available, browser, test, list, web design, typography, font styles, font families, system fonts, custom fonts'
		}) %>

<body>
	<%- include('partials/adblock/changelog.ejs') %>
	<%- include('partials/support_me.ejs') %>
	<%- include('partials/header.ejs', {page:'fontlist'}) %>
	<main>
		<div class="grid">
			<div class="col-6 _ta-center">
				<svg xmlns="http://www.w3.org/2000/svg" fill="var(--txt-r)" width="128" height="128" viewBox="0 0 128 128">
					<path
						d="M50.336 22.85c-1.471 0-2.942.712-3.54 2.137L19.911 89a3.84 3.84 0 0 0 2.052 5.029 3.835 3.835 0 0 0 5.029-2.054l5.407-12.874h35.88l5.408 12.874a3.82 3.82 0 0 0 3.539 2.354c.07 0 .139-.017.208-.02.063.004.122.019.186.019h18.893c7.513 0 13.619-6.108 13.619-13.62 0-5.372-3.152-9.985-7.677-12.204 2.559-2.472 4.162-5.932 4.162-9.765 0-7.51-6.107-13.62-13.62-13.62H77.62a2.637 2.637 0 0 0-2.636 2.636V75.24L53.877 24.987c-.597-1.425-2.07-2.138-3.54-2.138zM18.991 97.655c-4.372 0-4.991 1.67-4.991 3.747s.636 3.748 4.99 3.748h89.41c4.355 0 5.601-1.679 5.601-3.748s-1.23-3.747-5.601-3.747z" />
				</svg>
			</div>
			<div class="col-6">
				<div class="card" id="results">
				</div>
			</div>
			<div>
				<div class="card">
					<fieldset>
						<legend>Font Test</legend>
						<div class="row">
							<div>
								<sub>Click on below text to edit</sub>
								<h1 id="font_test" contenteditable>
									abcde
									<div>12345</div>
								</h1>
								<hr>
								<div>
								<pre class="_mt-2"><code id="css-code">.custom-font {
  font-family: Arial;
  font-weight: 500;
  font-size: 48px; 
  letter-spacing: 0px;
  line-height: 1.4;
}</code></pre></div>
							</div>
							<div>
								<div class="grid">
									<div>
										<select id="f_options">
											<option value="Arial">Select font..</option>
										</select>
									</div>
									<div>
										<label>Font Weight &nbsp; <span id="r_fw_value">500</span>
											<input id="r_fw" type="range" value="500" min="100" max="900" step="50">
										</label>
										<label>Font Size &nbsp; <span id="r_fs_value">48px</span>
											<input id="r_fs" type="range" min="8" max="72" value="48" />
										</label>
										<label>Letter Spacing &nbsp; <span id="r_ls_value">0px</span>
											<input id="r_ls" type="range" min="-20" max="20" value="0" step=".1" />
										</label>
										<label>Line Height &nbsp; <span id="r_lh_value">1.4</span>
											<input id="r_lh" type="range" min="0" max="2" value="1.4" step=".1" />
										</label>
									</div>
									<div>
										<button class="btn-p" id="css_code_copy"><svg stroke="currentColor" fill="none" stroke-width="2"
												viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"
												height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
												<desc></desc>
												<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
												<rect x="8" y="8" width="12" height="12" rx="2"></rect>
												<path d="M16 8v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2">
												</path>
											</svg> Copy CSS to Clipboard</button>
									</div>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
			<div>
				<details class="card _p-0 _shadowless  _bg _my-2">
					<summary class="_p-1"> FontList </summary>
					<div class="_p-1">
						<p>
							Standard fonts may appear differently on different devices or operating systems, causing
							inconsistency in the appearance of text on a webpage.<br>
							This testing tool allows you to check over 200+ standard fonts and see which ones are supported
							by your browser.
							The page displays a list of each supported font.<br>
							Users can also customize the sample text and adjust font size and style options to see how the
							different fonts look in various settings. This tool is useful for designers, developers, and
							anyone looking to experiment with different fonts on their website.
							<br>
						</p>
					</div>
				</details>
			</div>
	
			<div>
				<div id="flist">
				</div>
			</div>
		</div>
	</main>
    <%- include('partials/footer.ejs') %>
    <%- include('partials/gotop.ejs') %>
</body>
</html>